import { Button as AntButton, type ButtonProps as AntButtonProps } from 'antd-mobile'
import { cn } from '@/lib/utils'

interface ButtonProps extends AntButtonProps {
  variant?: 'primary' | 'secondary' | 'text'
  size?: 'small' | 'medium' | 'large'
  rounded?: boolean
}

export function Button({ 
  variant = 'primary', 
  size = 'medium', 
  rounded = false,
  className,
  children,
  ...props 
}: ButtonProps) {
  const baseClasses = 'font-medium transition-all duration-300 ease-in-out'
  
  const variantClasses = {
    primary: 'bg-[#E6F3FF] text-[#2C5282] border-none shadow-md hover:bg-[#B3D9FF] hover:shadow-lg hover:-translate-y-0.5 active:scale-95',
    secondary: 'bg-transparent text-[#E6F3FF] border-2 border-[#E6F3FF] hover:bg-[#E6F3FF] hover:text-[#2C5282] active:scale-95',
    text: 'bg-transparent text-[#87CEEB] border-none hover:text-[#2C5282] hover:underline active:scale-95'
  }[variant]
  
  const sizeClasses = {
    small: 'px-3 py-2 text-sm',
    medium: 'px-4 py-3 text-base',
    large: 'px-6 py-4 text-lg'
  }[size]
  
  const roundedClass = rounded ? 'rounded-full' : 'rounded-xl'
  
  return (
    <AntButton
      className={cn(baseClasses, variantClasses, sizeClasses, roundedClass, className)}
      {...props}
    >
      {children}
    </AntButton>
  )
}